<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			.addTerminal {
				width: 80%;
				position: absolute;
				bottom: 20px;
				left: 10%;
				display: block;
			}
			
			.addTerminal a {
				width: 100%;
				font-size: x-large;
				margin-bottom: 10px;
			}
			
			.mui-card {
				margin: 0 15px;
				height: 80vh;
				padding: 0 5px;
				overflow-y: auto;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: #7766e7 font-size: large;
				text-align: left;
			}
			
			.mui-table-view {}
			
			.mui-table-view-cell {
				border-radius: 5px;
				box-shadow: 0 0 10px rgba(133, 87, 227, 0.5);
				margin: 10px 0;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #007AFF;
			}
			
			.mui-table-view-cell.mui-active .terminalNameSpan {
				color: #fff!important;
			}
			
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				/*background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#6699ff), to(#9933cc));*/
			}
			
			.search_wk {
				margin: 15px;
				border-radius: 3px;
				border: 1px solid #ebe7f2;
			}
			
			.search {
				padding: 5px 30px 5px 5px!important;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				-o-box-sizing: border-box;
				box-sizing: border-box;
				margin-bottom: 0!important;
				background: url(../images/search_icon.png) no-repeat!important;
				background-size: auto 65%!important;
				background-position: 98%!important;
			}
		</style>

	</head>

	<body>
		<div class="search_wk">
			<input id="search" class="search" type="search" placeholder="请输入关键词">
		</div>
		<div class="mui-card">
			<!--内容区-->
			<div class="mui-card-content">
				<ul class="mui-table-view" id="terminaldiv">
				</ul>
			</div>
			<!-- END 内容区-->
		</div>
		<div class="addTerminal">
			<!--<a href="#" class="mui-btn mui-btn-primary " id="addnewterminal">添加新设备</a>-->
			<a href="#" class="mui-btn mui-btn-success " id="addnewterminalExt" onclick="addTerminal()">手工添加</a>
		</div>

		<li class="mui-table-view-cell mui-collapse" id="terminal-template" style="display: none;">
			<a class="mui-navigate-right terminalNameSpan" href="#" id="a_terminalNameSpan">设备名称</a>
			<div class="mui-collapse-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label id="label_terminalname">设备名称<span class="mui-icon mui-icon-compose"></span></label>
						<input type="text" class="mui-input-clear terminalName" placeholder="" style="border: 1px;">
					</div>
					<div class="mui-input-row">
						<label id="label_terminalsn">序列号</label>
						<input type="text" class="mui-input-clear terminalSn" readonly="readonly" placeholder="">
					</div>
					<div class="mui-input-row">
						<label id="label_terminalbl">所属类型</label>
						<input type="text" class="mui-input-clear terminalCname" readonly="readonly" placeholder="">
					</div>
					<div class="mui-input-row">
						<label id="label_terminaladdtime">添加时间</label>
						<input type="text" class="mui-input-clear terminalTime" readonly="readonly" placeholder="">
					</div>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary btn-update btn-terminal">修改</button>
						<!--<button type="button" class="mui-btn mui-btn-success btn-reset">恢复</button>-->
						<button type="button" class="mui-btn mui-btn-danger btn-delete btn-terminal">删除</button>
					</div>
				</form>
			</div>
		</li>

		<script src="../js/mui.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script src="../js/dateformat.js"></script>
		<script type="text/javascript" src="../libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript">
			var selectStr = '<select class="configtype mui-btn mui-btn-block">';
			var isEn = false;

			function initList() {
				app.freshTerminal();

				if(app.getLanguage() == "en") {
					isEn = true;

					jQuery.i18n.properties({
						name: 'Messages',
						path: '../bundle/',
						mode: 'both',
						language: app.getLanguage(),
						async: true,
						callback: function() {
							jQuery('#addnewterminalExt').html(i18n_addnewterminalExt);
							jQuery('#search').attr("placeholder", i18n_search);
							jQuery('#a_terminalNameSpan').html(i18n_a_terminalNameSpan);
							jQuery('#label_terminalname').html(i18n_label_terminalname);
							jQuery('#label_terminalsn').html(i18n_label_terminalsn);
							jQuery('#label_terminalbl').html(i18n_label_terminalbl);
							jQuery('#label_terminaladdtime').html(i18n_label_terminaladdtime);
							jQuery('.btn-update').html(i18n_btn_update);
							jQuery('.btn-delete').html(i18n_btn_delete);

						}
					});

				}

				app.getServerConfig(function(serverconfig) {

					jQuery.each(serverconfig, function(index, data) {
						selectStr += '<option value="' + data.configID + '">' + data.configName + '</option>';

					});
					app.getTerminal("", function(terminals) {
						var terminaldiv = jQuery("#terminaldiv").empty();

						jQuery.each(terminals, function(index, data) {
							console.log(data);
							var template = jQuery("#terminal-template").clone();
							template.attr("id", "terminaldiv_" + data.id);
							template.data("id", data.id);
							template.show();

							template.find(".terminalNameSpan").html(data.terminalName);

							template.find(".terminalName").val(data.terminalName);
							template.find(".terminalSn").val(data.sn);
							template.find(".terminalCname").val(data.socketServerConfig.configName);
							template.find(".terminalTime").val(new Date(data.addTime).toString());

							terminaldiv.append(template);

						});
					});
				});
			}

			function addTerminalCallback(data) {
				console.log(data);
				$.alert(data.returnMessage);
				initList();
			}

			function addTerminal() {

				var content = '' +
					'<form action="" class="formName">' +
					'<div class="form-group">' +
					(isEn ? '<label>Terminal Type</label>' : '<label>设备类型</label>') + selectStr +
					'</select>' +
					(isEn ? '<label>Terminal Name</label>' : '<label>设备名称</label>') +
					'<input type="text" placeholder="' + (isEn ? 'Terminal Name' : '设备名称') +
					'" class="name form-control" required />' +
					'<label>SN</label>' +
					'<input type="text" placeholder="SN" class="sn form-control" required />' +
					'</div>' +
					'</form>';
				jQuery.confirm({
					title: (isEn ? 'Add Terminal' : '添加设备'),
					content: content,
					buttons: {
						formSubmit: {
							text: (isEn ? 'Submit' : '确认'),
							btnClass: 'btn-blue',
							action: function() {
								var configtype = this.$content.find('.configtype').val();
								var name = this.$content.find('.name').val();
								var sn = this.$content.find('.sn').val();
								if(!name || !sn) {
									$.alert(isEn ? 'Name Or Sn Cannot be null' : '未填写正确');
									return false;
								}
								//console.log(configtype);
								app.addTerminal(configtype, name, sn, addTerminalCallback);
							}
						},
						cancel: {
							text: (isEn ? 'Cancle' : '取消'),
							action: function() {

							}
						},
					},
					onContentReady: function() {
						// bind to events
						var jc = this;
						this.$content.find('form').on('submit', function(e) {
							// if the user submits the form by pressing enter in the field.
							e.preventDefault();
							jc.$$formSubmit.trigger('click'); // reference the button and click it
						});
					}
				});
			}

			function changeCallBack() {
				//app.freshTerminal();
				initList();
			}

			function initPage() {
				initList();

				jQuery(document).on("click", ".btn-terminal", function(e) {
					//console.log(e);
					var button = jQuery(e.target);
					var li = button.parents("li");
					var id = li.data("id");
					var name = li.find(".terminalName").val();
					var sn = li.find(".terminalSn").val();
					if(button.hasClass("btn-update")) {
						app.updateTerminal(id, name, sn, changeCallBack);
					} else {
						app.delTerminal(id, changeCallBack);
					}
					console.log(id);
					console.log(name);
				});
			}
			(function($, doc) {
				$.plusReady(initPage);
			}(mui, document));
			//			jQuery(document).ready(initPage);
		</script>
	</body>

</html>